<!DOCTYPE html>
<html lang="en">
<!-- 数据状态分析页面 -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" href="../../static/css/style.min.css" th:href="@{/css/style.min.css}">
    <link rel="stylesheet" href="../../static/css/layui.css" th:href="@{/css/layui.css}">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
</style>

<body>
    <table id="demo" lay-filter="test"></table>
    <template id="details">
        <a href="" class="btn btn-success btn-xs ">查看详情</a>
        <a href="" class="btn btn-danger btn-xs ">删除</a>
    </template>
</body>

<script src="../../static/js/layui.js" th:src="@{/js/layui.js}"></script>
<script>
    layui.use('table', function () {
        var table = layui.table;
        //第一个实例
        table.render({
            elem: '#demo'
            , height: 312
            // , url: '/static/json/table/user.json' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                { field: 'id', title: '序号', width: "14%", sort: true, unresize: true, align: 'center' }
                , { field: 'username', title: '部门名称', width: '15%', align: 'center' }
                , { field: 'sex', title: '设备类型', width: '14%', sort: true, unresize: true, align: 'center' }
                , { field: 'city', title: '数量', width: '14%', unresize: true, align: 'center' }
                , { field: 'sign', title: '占比', width: '14%', unresize: true, align: 'center' }
                , { field: 'experience', title: '总数', width: '14%', sort: true, unresize: true, align: 'center' },
                {
                    field: 'operation', title: '操作', width: '15%', sort: false, toolbar: '#details', 
                    unresize: true, templet: '#details', templet: '#delates', align: 'center'
                }
            ]],
            data: [{
                id: '1',
                username: '555',
                sex: 'nan',
                city: '河南',
                sign: 'sdawda',
                experience: 555,
            },
            {
                id: '1',
                username: '555',
                sex: 'nan',
                city: '河南',
                sign: 'sdawda',
                experience: 555,
            },
            {
                id: '1',
                username: '555',
                sex: 'nan',
                city: '河南',
                sign: 'sdawda',
                experience: 555,
            },
            {
                id: '1',
                username: '555',
                sex: 'nan',
                city: '河南',
                sign: 'sdawda',
                experience: 555,
            },
            {
                id: '1',
                username: '555',
                sex: 'nan',
                city: '河南',
                sign: 'sdawda',
                experience: 555,
            },
            {
                id: '1',
                username: '555',
                sex: 'nan',
                city: '河南',
                sign: 'sdawda',
                experience: 555,
            },
            {
                id: '1',
                username: '555',
                sex: 'nan',
                city: '河南',
                sign: 'sdawda',
                experience: 555,
            },
            {
                id: '1',
                username: '555',
                sex: 'nan',
                city: '河南',
                sign: 'sdawda',
                experience: 555,
            },
            {
                id: '1',
                username: '555',
                sex: 'nan',
                city: '河南',
                sign: 'sdawda',
                experience: 555,
            },
            {
                id: '1',
                username: '555',
                sex: 'nan',
                city: '河南',
                sign: 'sdawda',
                experience: 555,
            },
            {
                id: '1',
                username: '555',
                sex: 'nan',
                city: '河南',
                sign: 'sdawda',
                experience: 555,
            },
            {
                id: '1',
                username: '555',
                sex: 'nan',
                city: '河南',
                sign: 'sdawda',
                experience: 555,
            },
            {
                id: '1',
                username: '555',
                sex: 'nan',
                city: '河南',
                sign: 'sdawda',
                experience: 555,
            },
            {
                id: '1',
                username: '555',
                sex: 'nan',
                city: '河南',
                sign: 'sdawda',
                experience: 555,
            },
            {
                id: '1',
                username: '555',
                sex: 'nan',
                city: '河南',
                sign: 'sdawda',
                experience: 555,
            },
            {
                id: '1',
                username: '555',
                sex: 'nan',
                city: '河南',
                sign: 'sdawda',
                experience: 555,
            }],

        });
    });
</script>

</html>